<template>
  <view>
    <up-overlay :show="show" @click="show = false">
      <view class="login-box">
        <view class="tip">请登录后在进行操作</view>
        <view class="btn-list">
          <view @tap="cancel">取消</view>
          <view @tap="login">登录</view>

          <!-- <button class="primary-btn" type="primary" @tap="login">登录</button> -->
        </view>
      </view>
    </up-overlay>
  </view>
</template>

<script setup>
// import { postUserInfo, postAuthLogin } from "@/sercive/index.js";
import { useUserStore } from '@/store';
const store = useUserStore();
const show = ref(false);
const jsCode = ref("");
const emit = defineEmits([
  "loginSuccess",
]);

function getJsCode() {
  return new Promise((resolve) => {
    uni.login({
      provider: "weixin",
      success: (result) => {
        console.log('result--',result);
        jsCode.value = result.code;
        resolve(result.code);
      },
    });
  });
}
async function login() {
  //  await this.getJsCode();
  uni.showLoading({
    title: "加载中",
  });

  const jsCode = await getJsCode();
  store.login({
    jsCode,
    // signature: "string",
    // rawData: "string",
    // encryptedData: "string",
  }).then(res => {
    uni.hideLoading({
      title: "登录成功",
    });
    console.log('res--', res);
    emit("loginSuccess");
  })
  // postAuthLogin({
  //   // avatar,
  //   // gender,
  //   // nickname,
  //   jsCode,
  // }).then((data) => {
  //   uni.setStorageSync("token", data.token);
  //   postUserInfo().then((data1) => {
  //     uni.setStorageSync("userInfo", data1);
  //     uni.hideLoading({
  //       title: "加载完成",
  //     });
  //     this.$emit("loginSuccess");
  //   });
  // });
}

defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  margin: auto;
  width: 80vw;
  background: #fff;
  border-radius: 8px;
  transform: translate(-50%, -50%);

  .tip {
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
    color: #6a6a6b;
  }

  .btn-list {
    display: flex;

    > view {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      color: #4c4c4c;
      background: #f2f2f2;
      border-radius: 5px;
      flex: 1;

      &:first-child {
        margin-right: 20px;
      }

      &:last-child {
        color: #fff;
        background: #6bb88a;
      }
    }
  }
}
</style>
